.connect {
    background-color: #000;
    width: 100vw;
    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    .window {
        z-index: 1;

        .logo {
            img {
                width: 60px;
                height: 60px;
                margin-bottom: 10px;
                //border: 2px solid black;
                // border-radius: 5px;
            }
        }

        max-width: 90%;
        width: 360px;

        .highlight-text {
            font-size: 2.7rem;
            color: white;
            font-weight: 800;
            font-family: "Open Sans", sans-serif;
            margin-bottom: 20px;
            text-transform: uppercase;

            .brand {
                text-align: center;
                letter-spacing: 1.2px;
                text-transform: uppercase;
                font-weight: 600;
            }
        }

        .connect-input {
            margin-bottom: 15px;

            input {
                border: none;
                border-radius: 0px;
                padding: 20px;
                background-color: transparent;
                width: 100%;
                border-bottom: 2px solid white;
                // box-shadow: rgb(17 17 18 / 4%) 0 2px 4px, rgb(19 20 20 / 6%) 0 1px 1px !important;
                color: white;
                transition: all ease-in-out 0.4s;

                &:hover,
                &:focus {
                    background-color: white;
                    color: black;

                    &::placeholder {
                        color: black;
                    }
                }

                &::placeholder {
                    color: white;
                }
            }
        }

        .submit {
            position: relative;
        }

        button {
            background-color: transparent;
            border: 2px solid white;
            color: white;
            padding: 13px;

            width: 100%;
            border-radius: 0px;
            position: relative;
            text-transform: uppercase;
            font-weight: 600;

            &:hover {
                cursor: pointer;
            }
        }
    }

    .panel {
        border: none;
    }
}